<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时钟</title>
		<style type="text/css">
			#can{
				width: 600px;
				height: 600px;
				margin: 10px auto;
				border:1px solid #ccc;
				display: block;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="1200" height="1200"></canvas>
		<script type="text/javascript">
			let dom = document.getElementById("can")
			let can = dom.getContext("2d")
			
			can.translate(dom.width/2,dom.height/2)
			
			can.save()
			
			let r = dom.width*0.4
			
			//画表盘
			can.arc(0,0,r,0,2*Math.PI)
			can.fill()
			can.beginPath()
			
			//画时刻度
			for(let i=0;i < 12;i++){
				can.rotate(2*Math.PI/12)
				can.strokeStyle = "#fff"
				can.lineWidth = 14
				
				can.moveTo(0,-r+35)
				can.lineTo(0,-r+110)
				can.stroke()
			}
			
			
			//画分刻度
			for(let j = 0;j < 60; j ++){
				can.strokeStyle = "#fff"
				can.lineWidth = 4
				can.rotate(2*Math.PI/60)
				can.moveTo(0,-r+35)
				can.lineTo(0,-r+75)
				can.stroke()
			}
			
			
			//画时针
			can.beginPath()
			can.restore()
			can.save()
			can.strokeStyle = "#fff"
			can.rotate(2*Math.PI/720*150)
			can.lineWidth = 16
			can.moveTo(0,60)
			can.lineTo(0,-r+280)
			can.stroke()
			
			//画分针
			can.beginPath()
			can.restore()
			can.save()
			can.strokeStyle = "#fff"
			can.rotate(2*Math.PI/60*25)
			can.lineWidth = 8
			can.moveTo(0,100)
			can.lineTo(0,-r+200)
			can.stroke()
			
			//画秒针
			can.beginPath()
			can.restore()
			can.save()
			can.rotate(2*Math.PI/60*28)
			can.strokeStyle = "#f00"
			can.lineWidth = 4
			can.moveTo(0,100)
			can.lineTo(0,-r+140)
			can.stroke()
			
			can.beginPath()
			can.fillStyle = "#f00"
			can.arc(0,0,8,0,2*Math.PI)
			can.fill()
		</script>
	</body>
</html>
